<template>
  <form-box headText="头信息">
    <el-form-item label="客户名称" label-width="90px" prop="cst_name" required>
      <el-select v-model="reqData.cst_order_head.cst_name"
                 name="cstName"
                 clearable
                 filterable
                 remote
                 :remote-method="remoteMethod_cstName"
                 :loading="cstNameSearchLoading"
                 @change="selectCstNameChange"
                 placeholder="客户名称">
        <el-option
          v-for="item in options_search_headCstName"
          :key="item.cst_company_id"
          :label="item.cst_name"
          :value="item.cst_company_id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="接受日期" label-width="90px" prop="order_accept_date" required>
      <el-date-picker
        v-model="reqData.cst_order_head.order_accept_date"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
    </el-form-item>
    <br/>

    <el-form-item label="订单号" label-width="90px">
      <el-input v-model="reqData.cst_order_head.project_no" :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="币种" label-width="90px" prop="coin">
      <el-input v-model="reqData.cst_order_head.coin"></el-input>
    </el-form-item>
    <el-form-item label="发票类型" label-width="90px">
      <el-input v-model="reqData.cst_order_head.invoice_type"></el-input>
    </el-form-item>
    <el-form-item label="交货地址" label-width="90px">
      <el-input v-model="reqData.cst_order_head.delivery_place"></el-input>
    </el-form-item>
    <el-form-item label="是否含税" label-width="90px">
      <el-switch
        v-model="reqData.cst_order_head.is_include_tax"
        on-color="#13ce66"
        off-color="#ff4949">
      </el-switch>
    </el-form-item>
    <el-form-item label="税率" label-width="90px">
      <el-input v-model="reqData.cst_order_head.tax_ratio"></el-input>
    </el-form-item>
    <el-form-item label="交货方式" label-width="90px">
      <el-input v-model="reqData.cst_order_head.delivery_type"></el-input>
    </el-form-item>
    <el-form-item label="业务员" label-width="90px" prop="salesman_name">
      <el-input v-model="reqData.cst_order_head.salesman_name"></el-input>
    </el-form-item>
  </form-box>
</template>
<script>
  import { dictCstCompanyList } from '@/api/cstOrder/quote'
  import formBox from '../../../components/formBox.vue'

  export default {
    name:'createCstOrderHead',
    components:{
      formBox
    },
    props:[
      'reqData',
      'pickerOptions'
    ],
    data(){
      return {
        cstNameSearchLoading:false,
        options_search_headCstName:[],
        serachHeadCstNameReqData:{
          client_type:1,
          company_id:'',
          cst_name:''
        },
      }
    },
    methods:{
      remoteMethod_cstName(query){  //定单头信息 公司客户搜索 方法
        this.cstNameSearchLoading = true;
        this.serachHeadCstNameReqData.cst_name = query
        dictCstCompanyList(this.serachHeadCstNameReqData)
          .then(res => {
            setTimeout(() => {
              this.cstNameSearchLoading = false;
              this.options_search_headCstName = res.cst_list
            }, 1000 * Math.random());
          })
          .catch(err => {
            this.$message.error('查询失败!');
            console.log(err);
          })
      },
      selectCstNameChange(val){ //头信息-公司客户 搜索选框的change事件方法
        if(val !== ''){
          for(let i of this.options_search_headCstName){
            if(i.cst_company_id == val){
              this.reqData.cst_order_head.cst_name = i.cst_name
              this.reqData.cst_order_head.cst_company_id = i.cst_company_id
            }
          }
        }

      },
    }
  }
</script>
<style scoped lang="scss">

</style>
